<template>


  <!--  外层容器-->
  <el-container style="height: 100%;">



    <!--    头部-->
    <el-header >

      <!--logo 部分-->
      <div class="layout-aside" >
        <div class="layout-logo">
          <router-link to="/index">
            <!--logo图标-->
            <img src="@/assets/images/ico/logo.png" alt="logo"/>
            <!--<img src="@/assets/images/ico/logo.gif" alt="logo"/>-->
            <span>{{sysName}}</span>
          </router-link>
        </div>
      </div>

      <!--页面头部-->
      <Header></Header>
    </el-header>


    <el-container style="height: calc(100% - 60px)">
      <!--    侧边栏容器-->
      <el-aside width="200px" style="background-color: #304156">
        <!--
        默认打开,router 则开启路由
        unique-opened 是否只保持一个子菜单的展开
        -->
        <el-menu
          background-color="#1F2D3D"
          text-color="#BFCBD9"
          unique-opened
          active-text-color="#409EFF"
          :default-active="$route.path"
          router @select="handleSelect">

          <el-menu-item index="/index" ><i class="el-icon-s-home" ></i>首页</el-menu-item>

          <!--<el-submenu index="1">-->
          <!--  <template slot="title"><i class="el-icon-user"></i>权限管理</template>-->
          <!--  <el-menu-item index="/index">地区管理</el-menu-item>-->
          <!--  <el-menu-item index="/index">字典管理</el-menu-item>-->
          <!--</el-submenu>-->

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>家庭管理</template>
            <el-menu-item index="/toEventList">事件</el-menu-item>
            <el-menu-item index="/toUserSaveUpd">个人信息</el-menu-item>
            <el-menu-item index="/toGetMemberFamilyAll">家庭成员</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-user"></i>社交管理</template>
            <el-menu-item index="/toSocialConnectionList">社交关系</el-menu-item>
            <el-submenu index="3-2">
              <template slot="title">关系图</template>
              <el-menu-item index="/toRelationGraphLine">清爽版</el-menu-item>
              <el-menu-item index="/toRelationGraphLineImages">标准版</el-menu-item>
            </el-submenu>
            <el-menu-item index="/toBirthdayList">生日管理</el-menu-item>
          </el-submenu>

          <el-submenu index="11">
            <template slot="title"><i class="el-icon-attract"></i>家族</template>
            <el-menu-item index="/toTombList">家族墓地</el-menu-item>
            <el-menu-item index="/toAppellationCalculation">家庭称谓计算器</el-menu-item>
          </el-submenu>

          <el-submenu index="10">
            <template slot="title"><i class="el-icon-notebook-1"></i>教育</template>
            <el-menu-item index="/toWordGroupList">单词组</el-menu-item>
            <el-menu-item index="/toGrowthRecord">成长记录</el-menu-item>
            <el-menu-item index="/toLearningPlan">学习计划</el-menu-item>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title"><i class="el-icon-tickets"></i>开支管理</template>
            <el-menu-item index="/toBillList">账单明细</el-menu-item>
            <el-menu-item index="/toBillingGroup">账单组</el-menu-item>
            <el-menu-item index="/toMonthlyBill">月度统计</el-menu-item>
            <el-menu-item index="/toYearBill">年度统计</el-menu-item>
            <el-menu-item index="/toTotalBill">总账单</el-menu-item>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title"><i class="el-icon-time"></i>任务计划中心</template>

            <el-submenu index="8-2">
              <template slot="title">计划</template>
              <el-menu-item index="/toPlanSaveUpd">新增计划</el-menu-item>
              <el-menu-item index="/toPlanTodayList">今日计划</el-menu-item>
              <el-menu-item index="/toPlanOverdueList">已逾期计划</el-menu-item>
              <el-menu-item index="/toPlanCompletedList">已结束停止计划</el-menu-item>
              <el-menu-item index="/toPlanList">全部计划</el-menu-item>
            </el-submenu>

            <el-menu-item index="/toNotepad">记事本</el-menu-item>
            <el-menu-item index="/toJotDownList">随手记</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title"><i class="el-icon-data-board"></i>保险箱</template>
            <el-menu-item index="/toPasswordManagement">密码管理</el-menu-item>
            <!--<el-menu-item index="/4-2">证件管理</el-menu-item>-->
            <el-menu-item index="/toMenstruationList">月经记录</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title"><i class="el-icon-edit-outline"></i>我的收藏</template>
            <el-menu-item index="/websiteList">网址</el-menu-item>
            <el-menu-item index="/bookList">书籍</el-menu-item>
            <el-menu-item index="/musicList">音乐</el-menu-item>
            <el-menu-item index="/toMoviesList">影视</el-menu-item>
            <el-menu-item index="/softwareList">软件</el-menu-item>
            <el-menu-item index="/gameList">游戏</el-menu-item>
            <el-menu-item index="/shoppingCartList">购物</el-menu-item>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title"><i class="el-icon-suitcase-1"></i>工具箱</template>
            <el-menu-item index="/toDynamicRecordingList">动态记录表</el-menu-item>
            <el-submenu index="6-1">
              <template slot="title">视频播放</template>
              <el-menu-item index="/toVideoPlayback">本地视频</el-menu-item>
              <el-menu-item index="/toVideoPlaybackNoBorder">本地视频[无边框]</el-menu-item>
              <el-menu-item index="/toLiveBroadcast">直播</el-menu-item>
            </el-submenu>
            <el-submenu index="6-2">
              <template slot="title">快捷导入工具</template>
              <el-menu-item index="/toQuickImportOfMusic">网易云音乐导入</el-menu-item>
            </el-submenu>

            <el-menu-item index="/toSolarToLunarPage">阳历转阴历</el-menu-item>
            <el-menu-item index="/toPasswordGeneration">密码生成器</el-menu-item>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
            <el-menu-item index="/toDruid">数据库监控</el-menu-item>
            <el-menu-item index="/toDict">字典配置</el-menu-item>
            <el-menu-item index="/config">默认配置</el-menu-item>
            <el-menu-item index="/toAboutUs">关于我们</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <!--      主要区域容器-->
        <el-main class="el-main-class">

          <!--引入跳转路由-->
          <router-view ></router-view>

        </el-main>

        <!--        页脚-->
        <!--        <el-footer>Footer</el-footer>-->
      </el-container>

    </el-container>

  </el-container>


</template>


<script>


  import Index from '@/components/home/Index';
  import Header from '@/components/home/Header';
  import setting from '@/config/setting';

  export default {
    // 项目首页入口
    name: "Home",
    data() {
      return {
        // 系统名称
        sysName: setting.sysName,
      }
    },
    components: {
      Index,
      Header,
    },
    methods: {
      /**
       * 选中切换后的处理 /userManagement
       * @param key 调用的路径,比如
       * @param keyPath 数组，索引和调用路径
       */
      handleSelect(key, keyPath){

      },
    },
  }
</script>


<style scoped>

  .el-main-class {
    /*主体中间部分的背景颜色,带点灰色*/
    background-color: #f0f2f5;
  }

  /*头部*/
  .el-header {
    background-color: #ffff;
    color: rgb(191, 203, 217);
    /*line-height: 60px;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .el-submenu,.el-menu-item{
    min-width: 200px
  }


  /*logo部分的样式 start */
  .layout-aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100wh;
    width: 200px;
    transition: all 0.3s;
    background-color: #304156;
  }
  .layout-aside .layout-logo {
    height: 60px;
    background-color: #304156;
  }
  .layout-aside .layout-logo a {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
  }
  .layout-aside .layout-logo img {
    width: 32px;
    height: 32px;
  }
  .layout-aside .layout-logo span {
    font-size: 14px;
    line-height: 60px;
    /*log文字颜色*/
    color: #fff;
    margin-left: 12px;
  }

  /*logo部分的样式 end */

</style>

